{include file='public:header-css'/}
<style>
    .mobile-box {
        width: 375px;
        height: 736px;
        background-color: #eee;
    }

    .content-box {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        background-size: 100% 100% !important;
        background-repeat: no-repeat;
    }

    .tool-box {
        margin-left: 20px;
    }

    .card {
        padding: 30px;
        display: flex;
    }

    .line {
        height: 70px;
    }

    .fx-logo {
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    .fx-center {
        margin-top: 20px;
    }

    .row-info {
        text-align: center;
        color: #000;
        font-size: 15px;
        line-height: 30px;
    }

    .tit {
        font-size: 20px;
    }

    .fx-bot {
        position: absolute;
    }

    .fx-btn {
        background: #fff;
        height: 28px;
        width: 110px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;


    }

    .fx-btn image {
        width: 18px;
        margin-right: 5px;
    }

    .fx-btn text {
        font-weight: 500;
    }

    .qrcode-tool-box {
        width: 450px;
    }

    .qrcode-text {
        margin: 15px 0;
        font-size: 15px;
        font-weight: bold;
    }

    .tool-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    [v-cloak] {
        display: none;
    }
</style>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        {include file='public:left-menu'/}
        <!--End 左侧导航-->
        <!--头部信息-->
        {include file='public:nav-header' title="系统管理" subTitle="添加编辑地区"/}
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid" id="app" v-cloak>
                <div class="card">
                    <div class="mobile-box">
                        <div class="content-box" :style="{'background':`url(${payload.bg})`}">
<!--                            <div class="line"></div>-->
<!--                            <img v-if="payload.bg" src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/fx-logo.png" class="fx-logo" alt="">-->
<!--                            <div v-if="payload.bg" class="fx-center">-->
<!--                                <div class="row-info">xx用户</div>-->
<!--                                <div class="row-info tit">邀请您成为农场主</div>-->
<!--                                <div class="row-info">电话:178xxxx1948</div>-->
<!--                                <div class="row-info">ID:4</div>-->
<!--                            </div>-->
                            <img v-if="payload.bg" :style="{top:payload.qrcode_top+'px',left:payload.qrcode_left+'px',width:payload.qrcode_size+'px',height:payload.qrcode_size+'px'}" class="fx-bot" src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/W5EylNXzoZiv87d34b077c8e74006f8e222c11012059.png"/>
                        </div>
                    </div>
                    <div class="tool-box">
                        <el-button onclick="GetUploadify(1,'bg','logo','callback')">上传背景图片</el-button>
                        <div class="qrcode-text">二维码调整</div>
                        <el-card class="qrcode-tool-box">
                            <div class="tool-row">
                                <div style="margin-right: 25px">大小</div>
                                <el-slider v-model="payload.qrcode_size" show-input style="flex:1" :min="50" :max="250"></el-slider>
                            </div>
                            <div class="tool-row">
                                <div style="margin-right: 25px">上间距</div>
                                <el-slider v-model="payload.qrcode_top" show-input style="flex:1" :min="0" :max="736"></el-slider>
                            </div>
                            <div class="tool-row">
                                <div style="margin-right: 25px">左间距</div>
                                <el-slider v-model="payload.qrcode_left" show-input style="flex:1" :min="0" :max="375"></el-slider>
                            </div>
                        </el-card>
                        <el-button id="save" type="primary" style="margin-top: 10px">保存</el-button>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
</body>
</html>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const bg = '{$info.bg ?? ''}';
    const qrcode_size = {$info.qrcode_size ?? 150};
    const qrcode_left = {$info.qrcode_left ?? 112.5};
    const qrcode_top = {$info.qrcode_top ?? 275};

    const app = new Vue({
        el: '#app',
        data() {
            return {
                payload: {
                    bg: bg,
                    qrcode_size: qrcode_size,
                    qrcode_left: qrcode_left,
                    qrcode_top: qrcode_top
                }
            }
        }
    })

    $(function () {
        $('#save').click(() => {
            if (!app.payload.bg) {
                return layer.msg('请上传背景图')
            }
            $.post("{:url('System/save_distribution')}", app.payload, function (res) {
                layer.msg(res.msg)
            })
        })
    })

    function callback(fileurl_tmp, fileurl_id) {
        app.payload.bg = fileurl_tmp
    }
</script>